<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="search_box">
			<uni-easyinput 
				suffixIcon="search" 
				v-model="value"
				placeholder="请输入关键词"
				@iconClick="searchClick"
				:focus="true"
				></uni-easyinput>
		</view>
		<view class="fill_box"/>
		<ArticleList v-if="type_id.id" :type_id="type_id"/>
	</view>
</template>
<script setup>
	import {nextTick, onMounted, ref} from 'vue'
	import {ArticleModel} from '@/service/model/article.js'
	import ArticleList from '@/components/ArticleList/ArticleList.vue'
	const articleModel = new ArticleModel()
	const value=ref('')
	const type_id=ref({})
	const searchClick=()=>{
		if(value.value.trim().length<1){
			uni.showToast({
				title:'关键词不能为空',
				icon:'error'
			})
			return
		}
		type_id.value={
			type:'search',
			id:value.value
		}
	}
</script>
<style>
	.search_box {
		width: 96%;
		position: fixed;
		left: 50%;
		transform: translate(-50%,0);
		padding: 4rpx 10rpx;
		z-index: 10;
		background-color: #F5F5F5;
	}
	.fill_box{
		height: 80rpx;
	}
</style>
